<template>
    <a-select
        :disabled="disabled"
        v-model:value="selected"
        :mode="mode"
        :placeholder="placeholder"
        style="width: 100%"
        :filter-option="filterOption"
        :show-search="true"
        :options="list"
        @change="change"
    >
    </a-select>
</template>

<script>

export default {
    name: 'Select',
    components: {},
    props: {
        constant: {
            type: Object,
            required: true,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        mode: {
            type: String,
            default: 'combobox',
        },
        placeholder: {
            type: String,
            default: '请选择',
        },
        value: {
            type: [Number, String],
            default: null,
        }
    },
    data: function () {
        return {
            selected: null,
            list: [],
        };
    },
    computed: {},
    watch: {
        value: {
          handler(newV, oldV) {
            this.selected = newV
          },
          immediate: true
        },
        constant: {
            handler(newV, oldV) {
                let list = []
                for (let i in newV) {
                    list.push({
                        value: i * 1,
                        label: newV[i]
                    })
                }
                // console.log(1111, list, newV)
                this.list = list
            },
            immediate: true
        }
    },
    created() {
    },
    methods: {
        change(inputValue, option) {
            // console.log(111, inputValue, option)
            this.$emit('update:value', inputValue)
        },
        filterOption(inputValue, option) {
            // console.log(111, inputValue, option)
            return option.label.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1
        },
    }
}
</script>

<style scoped lang="less">
</style>